<script setup lang="ts">
const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
})
/**
 * 订单详情
 */
const toDetail = (id: string): void => {
  const token = uni.getStorageSync('token')
  const userInfo = uni.getStorageSync('userInfo')
  console.log(token, userInfo, "-----")
  if (token && userInfo?.nickname) {
    uni.navigateTo({
      url: `/pages/order/index?id=${id}`,
    })
  } else {
    uni.navigateTo({
      url: `/pages/orderV2/index?id=${id}`,
    })
  }

}
</script>

<template>
  <view class="cu-card shadow bg-white" :class="{'margin': index > 0, 'margin-index': index === 0}" v-for="(item, index) in props.dataList" :key="item.id">
    <view class="cu-item padding-sm" >
      <view class="flex justify-between align-center margin-bottom-xs">
        <text class="text-bold text-lg title">{{ item.title }}</text>
        <text class="price-text">￥{{ item.totalPrice }}元</text>
      </view>
      <view class="flex justify-between align-center">
        <view>
          <view class="flex flex-wrap margin-bottom-sm margin-top-sm">
            <span class="light tag-box"  type="primary" v-if="item.categorySelectionOne">{{ item.categorySelectionOne }}</span>
            <span class="light tag-box"  type="primary" v-if="item.categorySelectionTwo">{{ item.categorySelectionTwo }}</span>
            <span class="light tag-box"  type="primary" v-if="item.additionalServices">{{ item.additionalServices }}</span>
          </view>

          <view class="desc">
            {{ item.requirementDescription }}
          </view>

          <view class="text-sm text-gray time-box">
            期望时间：{{ item.expectedDeliveryTime }}
          </view>
        </view>
        <view class="text-right">
          <view class="look-btn" @click="toDetail(item.id)">查看详情</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.cu-card {
  border-radius: 20rpx;
  box-shadow: 0 8rpx 40rpx 0 rgba(153, 153, 153, 0.15);
  .title {
    font-size: 32rpx;
    color: #333333;
  }
  .class-name {
    font-size: 24rpx;
  }
  .light {
    margin-right: 10px;
  }
  .text-right {
    font-size: 24rpx;
    .look-btn {
      background: #4B7BF5;
      width: 160rpx;
      height: 52rpx;
      border-radius: 80rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      line-height: 52rpx;
      text-align: center;
    }
  }
  .tag-box {
    color: #4B7BF5;
    font-size: 24rpx;
    background: #EDF1FD;
    border-radius: 40rpx;
    padding: 0 10rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tag-box-desc {
    color: #666666;
    font-size: 24rpx;
    margin-right: 18rpx;
  }
  .time-box {
    color: #999999;
    font-size: 24rpx;
    margin-bottom: 6rpx;
  }
  .price-text {
    color: #4B7BF5;
    font-size: 36rpx;
    font-weight: 500;
  }
  .desc {
    width: 400rpx;
    font-size: 24rpx;
    color: #666666;
    margin-top: 28rpx;
    white-space: nowrap;       /* 不换行 */
    overflow: hidden;          /* 超出隐藏 */
    text-overflow: ellipsis;   /* 超出部分用 ... 表示 */
    margin-bottom: 20rpx;
  }
}
.margin-index {
  margin: 5px 30rpx 30rpx 30rpx;
}

</style>